<template>
	<view class="container">
		<view class="form">
			<view class="form-item">
				<text class="form-label">打卡类型：</text>
				<picker :value="typeIndex" mode="selector" :range="typeList1" @change="typeChange">
					<text class="picker">{{typeList[typeIndex].name}}</text>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label">打卡名称：</text>
				<input class="form-input" type="text" v-model="itemData.taskName" />
			</view>
			<view class="form-item">
				<text class="form-label">打卡积分：</text>
				<input class="form-input" type="number" v-model.number="itemData.taskScore" />
			</view>
			<view class="form-item" v-if="inputType==='add'">
				<text class="form-label">日期：</text>
				<picker mode="date" :value="itemData.startTime" @change="dateChange">
					<text class="picker">{{dateFormat(itemData.startTime)}}</text>
				</picker>
			</view>
			<view class="form-item" v-else>
				<text class="form-label">日期：</text>
				<picker mode="date" :value="itemData.startTime" @change="dateChange">
					<text class="picker">{{dateFormat(itemData.startTime)}}</text>
				</picker>
			</view>
			<view class="form-item">
				<text class="form-label">打卡内容：</text>
				<textarea class="form-textarea" v-model="itemData.taskContent"></textarea>
			</view>
			<view class="form-item">
				<button class="submit-button" @click="submitForm">提交</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/time.js'
	import {
		patriarchClockTaskAdd,
		patriarchClockTaskUpdate
	} from '@/api/api.js'
	export default {
		name: "clockInput",
		props: {
			itemData: {
				type: Object,
				required: true,

			},
			inputType: {
				type: String,
				required: true
			}
		},
		data() {
			return {
				typeList: [{key:1,name:"每日"}, {key:2,name:"限定"}],
				typeList1:["每日","限定"],
				typeIndex: 0,
			};
		},
		methods: {
			typeChange(e) {
				this.typeIndex = e.detail.value;
				this.itemData.taskType =this.typeList[this.typeIndex].key
			},
			dateChange(e) {
				this.itemData.startTime = new Date(e.detail.value + `${" 00:00:00"}`).getTime()
			},
			dateFormat(date) {
				console.log(date)
				console.log(this.itemData)
				let numStr = date.toString();
				let len = numStr.length;
				if (len == 10) {
					date = date * 1000
				}
				const d = new Date(date);
				return formatDate(d, 'yyyy-MM-dd');
			},
			submitForm() {

				let da = new Date(this.itemData.startTime)
				console.log(da.getDate())
				if (da.getDate()/2 > 10) {
					this.itemData.startTime = parseInt(Number(da.getTime() / 1000).toFixed(0))
				} else {
					this.itemData.startTime = parseInt(this.itemData.startTime)
				}
			
				console.log(this.itemData)
				if (this.inputType == "add") {
					patriarchClockTaskAdd(this.itemData).then(res => {
						console.log(res.data)
						if (res.data.code != 0) {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "新增成功"
							})
							uni.reLaunch({
								url: '/pages/index/index'
							});

						}
					})
				}
				if (this.inputType == "update") {
					patriarchClockTaskUpdate(this.itemData).then(res => {
						console.log(res.data)
						if (res.data.code != 0) {
							uni.showToast({
								icon: "none",
								title: res.data.message
							})
						} else {
							uni.showToast({
								icon: "none",
								title: "新增成功"
							})
							uni.reLaunch({
								url: '/pages/index/index'
							});

						}
					})
				}


			},
		},
	}
</script>


<style>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100vh;
		background-color: #f2f2f2;
	}

	.form {
		width: 80%;
		background-color: #fff;
		border-radius: 10px;
		padding: 20px;
		box-shadow: 0 0 10px #ccc;
	}

	.form-item {
		display: flex;
		flex-direction: column;
		margin-bottom: 20px;
	}

	.form-label {
		font-size: 16px;
		margin-bottom: 10px;
	}

	.form-input,
	.form-textarea {
		border: none;
		border-radius: 5px;
		padding: 10px;
		font-size: 16px;
		color: #333;
		background-color: #f2f2f2;
	}

	.picker {
		color: #333;
		font-size: 16px;
	}

	.submit-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
		cursor: pointer;
	}

	.submit-button:hover {
		background-color: #0066cc;
	}

	@media screen and (max-width: 768px) {
		.form {
			width: 90%;
		}
	}
</style>